<template>

  <div style="background-color: #effbfb">
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">

      <el-card style="width: 200px">
        <el-radio-button v-show="isCollapse==true" :value="false">显示菜单</el-radio-button>
        <el-radio-button v-show="isCollapse==false":value="true">隐藏菜单</el-radio-button>
      </el-card>

    </el-radio-group>
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        background-color="#FFDAB9"
        router
        style="height: 1000px;"
    >
      <el-sub-menu v-for="menus in menuList.menuData" :index="menus.id+''">
        <template #title>
          <!--                  <el-icon>  <component :is="menus.glyphicon" /></el-icon>-->
          <span>{{ menus.title }}</span>
        </template>
        <el-menu-item  v-for="subm in menus.childMenus" :index="subm.path">{{ subm.title }}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>

</template>

<script setup>

import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const isCollapse = ref(false)
const handleOpen = () => {

}
const handleClose = () => {

}


const menuList = reactive({menuData:[]})
onMounted(()=>{
  axios.get("/menu/getMenuList").then(res=>{
    if(res.code == 200){
      console.log(res.data)
      menuList.menuData = res.data
    }

  })
})
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}


</style>